<template>
  <div class="comment">
    <div class="top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>审核中心</el-breadcrumb-item>
        <el-breadcrumb-item>评论审核</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main">
      <div class="search">
        <el-form :inline="true" :model="pagelistquery" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="pagelistquery.admin" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="pagelistquery.state" placeholder="状态">
              <el-option label="全部" value></el-option>
              <el-option label="待审核" value="0"></el-option>
              <el-option label="审核通过" value="1"></el-option>
              <el-option label="审核未通过" value="-1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getCommentList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%;min-height:500px"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <!-- @expand-change="getreply" -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.child" style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="createtime" label="创建日期">
                <template slot-scope="scope">{{ scope.row.createtime | dataFormat }}</template>
              </el-table-column>
              <el-table-column label="回复者" prop="nickname"></el-table-column>
              <el-table-column label="被回复者" prop="tousernickname"></el-table-column>
              <el-table-column label="状态" prop="comment_ispublic">
                <template slot-scope="scope">
                  <span style="color:#6cbb7a" v-if="scope.row.ispublic==1">审核通过</span>
                  <span style="color:#409eff" v-if="scope.row.ispublic==0">未审核</span>
                  <span style="color:#f60c6c" v-if="scope.row.ispublic==-1">审核未通过</span>
                </template>
              </el-table-column>
              <el-table-column label="回复内容" prop="desc">
                <template slot-scope="scope">
                  <el-popover placement="right" width="400" trigger="hover">
                    <span v-html="scope.row.reply_content"></span>
                    <el-button type="text" slot="reference">回复类容</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="审核人" prop="admin"></el-table-column>
              <el-table-column fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.ispublic==1"
                    @click="changestate('reply',-1,scope.row.reply_id)"
                  >不通过审核
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.ispublic==0"
                    @click="changestate('reply',1,scope.row.reply_id)"
                  >通过审核
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.ispublic==0"
                    @click="changestate('reply',-1,scope.row.reply_id)"
                  >不通过审核
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.ispublic==-1"
                    @click="changestate('reply',1,scope.row.reply_id)"
                  >通过审核
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="del(scope.row.reply_id,'reply')"
                    :disabled="uinfo.jurisdiction.issh !=='1' && uinfo.username !== 'admin'"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="comment_createtime" label="创建日期">
          <template slot-scope="scope">{{ scope.row.comment_createtime | dataFormat }}</template>
        </el-table-column>
        <el-table-column label="评论者" prop="nickname"></el-table-column>
        <el-table-column label="状态" prop="ispublic">
          <template slot-scope="scope">
            <span style="color:#6cbb7a" v-if="scope.row.ispublic==1">审核通过</span>
            <span style="color:#409eff" v-if="scope.row.ispublic==0">未审核</span>
            <span style="color:#f60c6c" v-if="scope.row.ispublic==-1">审核未通过</span>
          </template>
        </el-table-column>
        <el-table-column label="评论内容" prop="desc">
          <template slot-scope="scope">
            <el-popover placement="right" width="400" trigger="hover">
              <span v-html="scope.row.comment_content"></span>
              <el-button type="text" slot="reference">评论类容</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="审核人" prop="admin"></el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              v-if="scope.row.ispublic==1"
              @click="changestate('comment',-1,scope.row.comment_id)"
            >不通过审核
            </el-button>
            <el-button
              type="text"
              size="small"
              v-if="scope.row.ispublic==0"
              @click="changestate('comment',1,scope.row.comment_id)"
            >通过审核
            </el-button>
            <el-button
              type="text"
              size="small"
              v-if="scope.row.ispublic==0"
              @click="changestate('comment',-1,scope.row.comment_id)"
            >不通过审核
            </el-button>
            <el-button
              type="text"
              size="small"
              v-if="scope.row.ispublic==-1"
              @click="changestate('comment',1,scope.row.comment_id)"
            >通过审核
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="del(scope.row.comment_id,'comment')"
              :disabled="uinfo.jurisdiction.issh !=='1' && uinfo.username !== 'admin'"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagelistquery.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagelistquery.total"
        style="margin-top: 20px;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'comment',
  data () {
    return {
      loading: false,
      pagelistquery: {
        admin: '',
        state: '',
        total: 0,
        page: 1,
        pagesize: 10
      },
      tableData: []
    }
  },
  computed: {
    ...mapState({
      uinfo: state => state.uinfo
    })
  },
  methods: {
    async getreply () {
      for (let index = 0; index < this.tableData.length; index++) {
        const result = await this.$axios.post('/admin/getreply',
          this.qs.stringify({ comment_id: this.tableData[index].comment_id })
        )
        if (result.data.state.type === 'SUCCESS') {
          console.log(result.data.data)
          this.tableData[index].child = result.data.data
          console.log(this.tableData)
        }
      }
    },
    async changestate (type, state, id) {
      const data = {
        id: id,
        type: type,
        state: state
      }
      const result = await this.$axios.post('/admin/changecontentstate', this.qs.stringify(data))
      if (result.data.state.type === 'SUCCESS') {
        this.$message.success('操作成功')
        this.getCommentList()
        this.dialog = false
      }
    },
    handleSizeChange (val) {
      this.pagelistquery.pagesize = val
      this.getCommentList()
    },
    handleCurrentChange (val) {
      this.pagelistquery.page = val
      this.getCommentList()
    },
    async del (id, type) {
      const data = {
        id: id,
        type: type
      }
      const result = await this.$axios.post('/admin/admindelete', this.qs.stringify(data))
      if (result.data.state.type === 'SUCCESS') {
        this.$message.success('删除成功')
        this.getCommentList()
      }
    },
    async getCommentList () {
      this.loading = true
      const result = await this.$axios.post('/admin/getcomment', this.qs.stringify(this.pagelistquery))
      if (result.data.state.type === 'SUCCESS') {
        this.tableData = result.data.data
        console.log(result.data.data)
        this.pagelistquery.total = result.data.count
        this.getreply()
      }
      this.loading = false
    }
  },
  created () {
    this.getCommentList()
  }
}
</script>

<style scoped>
  .top {
    position: relative;
    top: 0;
    left: 0;
    width: calc(100% - 35px);
    padding: 12px 16px;
    background-color: #fff;
  }

  .main {
    margin-top: 40px;
    padding: 20px;
    background-color: #fff;
  }
</style>
